<template>
  <view class="tn-show-product-info">
    <view class="cu-card case product-list">
      <view v-for="(product_item, product_index) in productData" :key="product_index" class="cu-item shadow bg-red">
        <view class="image">
          <image :src="product_item.product_image['prefix']" mode="aspectFill"></image>
          <view class="product-information bg-shadeBottom">
            <view class="text-cut title">{{ product_item.product_title }}</view>
            <view class="property">
              <text>
                <block v-for="(property_item, property_index) in formatProductSpecsData(product_item.specs_data)" :key="property_index">
                  {{ property_index > 0 ? ';' : ''}}{{ property_item.key + ':' + property_item.value }}
                </block>
              </text>
            </view>
          </view>
        </view>
        <view class="flex padding justify-between align-center">
          <view class="text-black text-lg">￥{{ product_item.product_price }}</view>
          <view class="margin-left text-gray">x{{ product_item.product_count }}</view>
        </view>
      </view>
      <slot name="bottom"></slot>
    </view>
  </view>
</template>

<script>
  export default {
    name: 'TnShowProductInfo',
    props: {
      productData: {
        type: Array,
        default: () => {
          return []
        }
      }
    },
    methods: {
      formatProductSpecsData(specs_data) {
        const new_specs_data = []
        for (let key in specs_data) {
          new_specs_data.push({
            key: key,
            value: specs_data[key]
          })
        }
        return new_specs_data
      }
    }
  }
</script>

<style lang="scss" scoped>
  .tn-show-product-info {
    .product-list {
      .product-information {
        position: absolute;
        bottom: 0;
        width: 100%;
        background-color: transparent;
        padding: 0rpx 30rpx 10rpx 30rpx;
    
        .title {
          text-overflow: ellipsis;
          border-bottom: none;
        }
    
        .property {
          width: 100%;
          word-wrap: break-word;
          -webkit-line-break: after-white-space;
          background-color: rgba(125, 125, 125, 0.3);
          padding: 3px 8px;
          border-radius: 5px;
        }
      }
    }
  }
</style>
